<template>
  <div>
    <span> caller's ID: </span>
    <input type="text" v-model="callerUserID" />
    <button @click="init">step1. init</button> <br />
    <span> callee's ID: </span>
    <input type="text" v-model="calleeUserID" />
    <button @click="call">step2. call</button>

    <!--【1】Import the TUICallKit component: Call interface UI -->
    <TUICallKit style="width: 100vw; height: 100vh" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  TUICallKit,
  TUICallKitServer,
  TUICallType,
} from "@tencentcloud/call-uikit-vue";
import * as GenerateTestUserSig from "../../debug/GenerateTestUserSig-es";
import { useRoute } from "vue-router";
const route = useRoute();

const callerUserID = ref(route.query.user_id.toString());
const calleeUserID = ref(route.query.to_id.toString());

const SDKAppID = 1600051832;
const SDKSecretKey =
  "2de928a45951946b14c2206cdceb76f680462eae98d3ccc5aade564fcc93cdd2";

const init = async () => {
  const { userSig } = GenerateTestUserSig.genTestUserSig({
    userID: callerUserID.value,
    SDKAppID,
    SecretKey: SDKSecretKey,
  });
  await TUICallKitServer.init({
    userID: callerUserID.value,
    userSig,
    SDKAppID,
  });
  alert("TUICallKit init succeed");
};

const call = async () => {
  await TUICallKitServer.call({
    userID: calleeUserID.value,
    type: TUICallType.VIDEO_CALL,
  });
};
</script>
<style lang="scss">
</style>
